<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type='text/javascript' src="../js/d3.v2.js"></script>
	<style>	
		svg {
		  font: 10px sans-serif;
		}		
		.txtSelect { background-color: orange; } 
		.txtAuto { background-color: red; } 
		.txtCalc { background-color: green; color:white;} 
		path {
		  fill: steelblue;
		}
		.axis path, .axis line {
		  fill: none;
		  stroke: #000;
		  shape-rendering: crispEdges;
		}
		.ref{
		  vertical-align:middle;
		}
	</style>
</head>
<body>
	<div id="chart"></div>
	  	<script>
	  	var w = 960,
	  	     h = 700,
	  	     r = Math.min(w, h) / 2,
	  	     color = d3.scale.category20c();
	  	 
	  	 var vis = d3.select("#chart").append("svg")
	  	     .attr("width", w)
	  	     .attr("height", h)
	  	   .append("g")
	  	     .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
	  	 
	  	 var partition = d3.layout.partition()
	  	     .sort(null)
	  	     .size([2 * Math.PI, r * r])
	  	     .value(function(d) { return 1; });
	  	 
	  	 var arc = d3.svg.arc()
	  	     .startAngle(function(d) { return d.x; })
	  	     .endAngle(function(d) { return d.x + d.dx; })
	  	     .innerRadius(function(d) { return Math.sqrt(d.y); })
	  	     .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); });
	  	 
	  	 d3.json("../../data/aeres_categories_sciences.json", function(json) {
	  	   var path = vis.data([json]).selectAll("path")
	  	       .data(partition.nodes)
	  	     .enter().append("path")
	  	       .attr("display", function(d) { return d.depth ? null : "none"; }) // hide inner ring
	  	       .attr("d", arc)
	  	       .attr("fill-rule", "evenodd")
	  	       .style("stroke", "#fff")
	  	       .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
	  	       .on("click",function(d) { alert(d.name); })
	  	       .each(stash);
	  	 
	  	   d3.select("#size").on("click", function() {
	  	     path
	  	         .data(partition.value(function(d) { return d.size; }))
	  	       .transition()
	  	         .duration(1500)
	  	         .attrTween("d", arcTween);
	  	 
	  	     d3.select("#size").classed("active", true);
	  	     d3.select("#count").classed("active", false);
	  	   });
	  	 
	  	   d3.select("#count").on("click", function() {
	  	     path
	  	         .data(partition.value(function(d) { return 1; }))
	  	       .transition()
	  	         .duration(1500)
	  	         .attrTween("d", arcTween);
	  	 
	  	     d3.select("#size").classed("active", false);
	  	     d3.select("#count").classed("active", true);
	  	   });
	  	 });
	  	 
	  	 // Stash the old values for transition.
	  	 function stash(d) {
	  	   d.x0 = d.x;
	  	   d.dx0 = d.dx;
	  	 }
	  	 
	  	 // Interpolate the arcs in data space.
	  	 function arcTween(a) {
	  	   var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
	  	   return function(t) {
	  	     var b = i(t);
	  	     a.x0 = b.x;
	  	     a.dx0 = b.dx;
	  	     return arc(b);
	  		};
	  	}
	  	</script>
	
  </body>
</html>	